import React, { useState, useEffect, forwardRef, useImperativeHandle } from "react";
import { Icon } from "antd";
import reactCSS from 'reactcss';
import { TwitterPicker, ChromePicker, SketchPicker } from 'react-color';
import Color_picker from './ColorPicker';

const ColorPicker = forwardRef(({ onChange }, ref) => {
    useImperativeHandle(ref, () => ({
        setColor: setColor,
    }))

    const [selectColor, setSelectColor] = useState({
        displayColorPicker: false,
        color: "#FF0000",
    });

    useEffect(() => { }, []);

    const init = (color) => {
        var obj = document.getElementById("picker");
        var color_picker = document.getElementById("Color-Picker");
        if (color_picker) {
            document.body.removeChild(color_picker)
        };
        var a = Color_picker.create({
            el: "color-picker",
            color: color,
            change: function (elem, hex) {
                // elem.style.backgroundColor = hex;
                setSelectColor({ displayColorPicker: false, color: hex });
                onChange && onChange(hex.toUpperCase());
            }
        })
    }

    const handleClick = () => {
        setSelectColor({ displayColorPicker: !selectColor.displayColorPicker, color: selectColor.color });
    };

    const handleClose = () => {
        setSelectColor({ displayColorPicker: false, color: selectColor.color });
    };

    const setColor = (color) => {
        setSelectColor({ displayColorPicker: false, color: color });
        setTimeout(() => {
            init(color)
        }, 500)
    };

    const setColors = (color) => {
        setSelectColor({ displayColorPicker: false, color: color });
        onChange && onChange(color.toUpperCase());
    };

    const handleChange = ({ hex }) => {
        setSelectColor({ displayColorPicker: true, color: hex.toUpperCase() });
        onChange && onChange(hex.toUpperCase());
    };

    const styles = reactCSS({
        default: {
            color: {
                width: '16px',
                height: '16px',
                borderRadius: '2px',
                background: selectColor.color,
            },
            swatch: {
                padding: '5px',
                background: '#fff',
                borderRadius: '1px',
                boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
                display: 'inline-block',
                cursor: 'pointer',
                borderRadius: '3px',
                background: selectColor.color,
            },
            color1: {
                width: '36px',
                height: '16px',
                borderRadius: '2px',
                background: selectColor.color,
            },
            swatch1: {
                padding: '3px',
                background: '#fff',
                borderRadius: '3px',
                boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
                display: 'flex',
                alignItems: 'center',
                cursor: 'pointer',
            },
            color2: {
                width: '16px',
                height: '16px',
                borderRadius: '2px',
                background: selectColor.color,
            },
            swatch2: {
                padding: '3px',
                background: '#fff',
                borderRadius: '3px',
                boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
                display: 'inline-block',
                cursor: 'pointer',
                borderRadius: '4px',
                background: '#FFFFFF',
            },
            popover: {
                position: 'absolute',
                zIndex: '2',
                right: '175px',
                top: '60px',
            },
            cover: {
                position: 'fixed',
                top: '0px',
                right: '0px',
                bottom: '0px',
                left: '0px',
            },
        },
    });

    const colorList = ['#FF0000', '#FFC000', '#FFFF00', '#92D050', '#00B050', '#00B0F0', '#0070C0', '#002060', '#7030A0',];

    return (
        <div>
            <div style={{ padding: '8px 0' }}>
                <div style={{ display: 'flex', gap: '5px' }}>
                    <div style={styles.swatch2}>
                        <div style={styles.color2} />
                    </div>
                    <div style={{ display: 'flex', alignItems: 'center' }}>
                        <div style={styles.swatch1}>
                            <div style={styles.color1} />
                            <Icon
                                type="down"
                                // onClick={handleClick}
                                style={{ fontSize: '12px', marginLeft: 3, background: '#FFF' }}
                                className="picker"
                                id="color-picker"
                            />
                        </div>
                    </div>
                </div>
            </div>
            <div style={{ display: 'flex', gap: '5px' }}>
                {colorList && colorList.length > 0 && colorList.map(color => (
                    <div
                        style={{
                            width: '20px',
                            height: '20px',
                            background: color,
                            borderRadius: '3px',
                            cursor: 'pointer',
                        }}
                        onClick={() => setColors(color)}
                    />
                ))}
            </div>
        </div>
    );
});

export default ColorPicker;